<template>
    <div class="container">
        <my-search :fields="fieldsList" :baseNumber="8" @onSearch="searchForm" @onReset="resetForm" :selectIsAddAll="false">

        </my-search>

        <div class="btn">
            <el-button type="info" plain size="mini" @click="go('add')">新建</el-button>
            <el-button type="info" plain size="mini" @click="deleteList()">删除</el-button>
            <el-button type="info" plain size="mini">
                发布</el-button>

        </div>
        <div class="table-list">
            <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :height="$store.state.app.windowHeight - 210" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" :totalPage="total" highlight-current-row :ifSelect="true" @onSelect="onSelectionChange" @onSelectAll="handleselectAll" />
        </div>
        <!-- 上传组件隐藏 -->
        <el-upload style="display:none;" ref="uploadTemplate" class="upload-demo" :before-upload="beforeUpload" action drag :show-file-list="false" :http-request="httpRequest" :multiple="false" accept=".xls,.csv,.xlsx">
            <el-button size="small" type="primary" ref="uploadTemplate_btn">点击上传</el-button>
        </el-upload>
    </div>
</template>

<script>

import { queryDetailList, batchDelete, downloadTemplate, uploadTemplate } from '@/api/cxtj/zdsygl'
import { hylx } from '@/api/common'
import { downloadFile } from "@/utils/utils"
export default {
    name: 'zdsygl-list',

    data() {
        return {
            loading: false,
            fieldsList: [
                {
                    label: '名称',
                    field: 'name',
                    type: 'text',
                    value: ''
                },

                {
                    label: '状态',
                    field: 'status',
                    type: 'select',
                    value: '',
                    multiple: false,
                    options: [
                        {
                            value: '1',
                            label: '起草中'
                        },
                        {
                            value: '2',
                            label: '发布中'
                        },
                        {
                            value: '3',
                            label: '已完成'
                        },
                    ]
                },

                {
                    label: '发布日期',
                    field: 'releaseDate',
                    type: 'date', // daterange
                    value: '',

                },
                {
                    label: '截止日期',
                    field: 'deadline',
                    type: 'date', // daterange
                    value: '',

                },


            ],

            tableColumns: [
                {
                    label: '名称',
                    prop: 'name',
                    align: 'center',
                    minWidth: 200,


                },
                {
                    label: '状态',
                    prop: 'status',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {

                        if (params.row.status == '1') {
                            return (
                                <span>起草中</span>
                            )
                        } else if (params.row.status == '2') {
                            return (
                                <span>发布中</span>
                            )
                        } else if (params.row.status == '3') {
                            return (
                                <span>已完成</span>
                            )
                        }
                    }
                },
                {
                    label: '发布日期',
                    prop: 'releaseDate',
                    align: 'center',
                    width: 160
                },
                {
                    label: '截止日期',
                    prop: 'deadline',
                    align: 'center',
                    width: 160
                },
                {
                    label: '完成情况',
                    prop: 'completion',
                    align: 'center',
                    width: 200
                },
                {
                    label: '操作',
                    align: 'center',
                    width: 200,
                    render: (h, params) => {

                        if (params.row.status == '1') {
                            //当状态为起草中 编辑中的成果任务，且没有发布（下发到地市级税务部门），只有编辑者（省局税务干部）可以看到和编辑
                            // if(){
                            // return (
                            //     <span>
                            //         <el-button type="text" onClick={() => this.go('detail', params.row)}>查看</el-button>
                            //         <el-button type="text" onClick={() => this.go('jtxxk', params.row)}>编辑</el-button>
                            //     </span>
                            // )
                            // }else {}
                            // return (
                            //     // <span>
                            //     //     <el-button type="text" onClick={() => this.go('detail', params.row)}>查看</el-button>
                            //     //     <el-button type="text" onClick={() => this.go('jtxxk', params.row)}>编辑</el-button>
                            //     // </span>
                            // )

                        } else if (params.row.status == '2') {
                            //成果任务编辑完成，并下发到地市级税务部门，编辑者（省局税务干部）不能修改，可以查看，接收者可以查看和填写
                            // if () {
                            //     return (
                            //         <span><el-button type="text" onClick={() => this.go('detail', params.row)}>查看</el-button></span>

                            //     )
                            // } else if () { //接收者可以查看和填写
                            //     return (
                            //         <span>
                            //             <el-button type="text" onClick={() => this.go('detail', params.row)}>查看</el-button>
                            //             <el-button type="text" onClick={() => this.go('detail', params.row)}>填报</el-button></span>
                            //     )
                            // }
                            return (
                                <span>
                                    <el-button type="text" onClick={() => this.go('detail', params.row)}>查看</el-button>
                                    <el-button type="text" onClick={() => this.go('detail', params.row)}>填报</el-button></span>
                            )
                        } else if (params.row.status == '3') {
                            return (
                                <span>
                                    <el-button type="text" onClick={() => this.go('detail', params.row)}>查看</el-button>
                                </span>
                            )
                        }

                    }
                }




            ],

            tableDatas: [
                {
                    name: '河北省税务成果统计汇编',
                    status: '1',
                    releaseDate: '2025-01-23',
                    deadline: '2025-01-31',
                    completion: '0/12'
                },
                {
                    name: '河北省税务工作成效汇总表',
                    status: '2',
                    releaseDate: '2025-01-15',
                    deadline: '2025-01-31',
                    completion: '6/12'
                },
                {
                    name: '河北省税务业绩分析报告统计',
                    status: '2',
                    releaseDate: '2025-01-10',
                    deadline: '2025-01-31',
                    completion: '11/12'
                },
                {
                    name: '总局税务绩效调查表',
                    status: '3',
                    releaseDate: '2025-01-08',
                    deadline: '2025-01-15',
                    completion: '12/12'
                },
                {
                    name: '总局税务合规性统计表',
                    status: '3',
                    releaseDate: '2024-12-11',
                    deadline: '2024-12-31',
                    completion: '12/12'
                },
                {
                    name: '税务稽查成效结果统计表',
                    status: '3',
                    releaseDate: '2024-12-25',
                    deadline: '2024-12-31',
                    completion: '12/12'
                }
            ]
            , queryObj: {
                nsrmc: '', //公司名称
                nsrsbh: '',
                ssjt_mc: '',
                ssds: '',
                hyml_mc: '',
                hydl_mc: '',
                zbsfzj: '',
                qylx_dm: '',
                sfssgs: '',
                jtxxk: '',
                pageNo: 1,
                pageSize: 20
            },
            total: 0,
            selectedRows: []
        }
    },

    mounted() {
        // this.getTableData();
    },
    methods: {

        searchForm(params) {
            this.queryObj.nsrmc = params.nsrmc || ''
            this.queryObj.qylx_dm = params.qylx_dm || ''
            this.queryObj.nsrsbh = params.nsrsbh || ''
            this.queryObj.ssjt_mc = params.ssjt_mc || ''
            this.queryObj.ssds = params.ssds || ''
            this.queryObj.hyml_mc = params.hyml_mc || ''
            this.queryObj.hydl_mc = params.hydl_mc || ''
            this.queryObj.zbsfzj = params.zbsfzj || ''

            this.getTableData();
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            this.tableDatas = []
            this.total = 0

        },
        getTableData() {
            this.loading = true
            let params = {
                nsrmc: this.queryObj.nsrmc,
                nsrsbh: this.queryObj.nsrsbh,
                ssjt_mc: this.queryObj.ssjt_mc,
                ssds: this.queryObj.ssds,
                hyml_mc: this.queryObj.hyml_mc,
                hydl_mc: this.queryObj.hydl_mc,
                zbsfzj: this.queryObj.zbsfzj,
                qylx_dm: this.queryObj.qylx_dm,
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,

                // sfssgs: this.queryObj.sfssgs ? 'Y' : '',
                // jtxxk: this.queryObj.jtxxk ? 'Y' : '',
            }
            queryDetailList(params).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                }
            })
        },

        deleteList() {
            if (this.selectedRows.length > 0) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    let nsrsbhArr = []
                    this.selectedRows.forEach(item => {
                        nsrsbhArr.push(item.nsrsbh)
                    })
                    batchDelete(nsrsbhArr.join(',')).then(result => {
                        console.log(result)
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }


        },
        //下载模板
        download() {
            downloadTemplate().then(res => {
                downloadFile(res)
            })
        },

        //s上传名册
        upload() {
            this.$refs['uploadTemplate'].$refs['upload-inner'].handleClick()
        },
        beforeUpload(file, fileList) {
            // console.log('文件状态改变前',file);
            // if(!file.name.includes('.pdf')) {
            //     this.$message.error('请上传pdf格式文件')
            //     return false
            // }

            // if (file.size > 1024 * 1024 * 10) {
            //     this.$message.warning(
            //         "你上传的 \“" + file.name + "\” 文件过大，请上传小于2M的文件。"
            //     );
            //     return false;
            // }

            if (
                file.name.indexOf("@") != -1 ||
                file.name.indexOf("#") != -1 ||
                file.name.indexOf('""') != -1 ||
                file.name.indexOf("<") != -1 ||
                file.name.indexOf(">") != -1 ||
                file.name.indexOf("?") != -1 ||
                file.name.indexOf("|") != -1 ||
                file.name.indexOf("/") != -1 ||
                file.name.indexOf(":") != -1 ||
                file.name.indexOf("`\`") != -1
            ) {
                this.$message.warning(
                    "你上传的 \“" +
                    file.name +
                    "\” 文件有特殊字符，文件名中不可存在特殊字符,请重新上传"
                );
                return false;
            }

            let index = file.name.lastIndexOf(".");
            let Type = file.name.substr(index + 1, file.name.length);
            if (["xls", "csv", "xlsx"].indexOf(Type.toLowerCase()) === -1) {
                this.$message({
                    type: "warning",
                    message: "请上传后缀名为xls,csv,xlsx的附件！",
                });
                return false;
            }
        },
        httpRequest(data) {
            console.log(data);
            this.loading = true
            let fd = new FormData();
            fd.append("file", data.file);
            uploadTemplate(fd).then((res) => {
                this.loading = false
                if (res.code == 200) {

                    this.$message({
                        type: "success",
                        message: res.message,
                    });
                    this.getTableData()

                }
            });
        },

        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        handleselectAll(selectedRows) {
            this.selectedRows = selectedRows;
            console.log(selectedRows)
        },
        go(name, params) {
            this.$emit('changePage', name, params);
            // this.changePage(name, params)
            // this.$router.push({
            //     name: name,
            //     params: { id: params.id }

            // })
        },

    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    .searchMy {
        padding: 8px;
        .searchMy-form {
            height: 28px;
        }
    }

    .btn {
        padding: 8px 8px 8px 0;
    }
}
::v-deep .underline-text {
    text-decoration: underline;
    cursor: pointer;
    overflow: hidden;
    color: #409eff;
}
</style>
